<template>
	<div class="inviterButieClass">
		<div class="tipBox">
			<p>
				当前补贴账号余额为
				<span>{{ butieData || 0 }}</span>
				元
			</p>
			<el-button @click="topUpBtn" type="primary">充值</el-button>
		</div>

		<div class="amount_box">
			<div class="lis">
				<p>充值总额</p>
				<p>{{ (totalMoneyType.butie - totalMoneyType.backButie + butieData).toFixed(2) }}元</p>
			</div>
			<div class="lis">
				<p>补贴总额</p>
				<p>{{ totalMoneyType.butie.toFixed(2) }}元</p>
			</div>
			<div class="lis">
				<p>补贴退回总额</p>
				<p>{{ totalMoneyType.backButie.toFixed(2) }}元</p>
			</div>
		</div>

		<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
			<el-table-column prop="merchName" label="商户名称" />
			<el-table-column prop="merchPhone" label="联系电话" />
			<el-table-column prop="address" label="商户总部地址" />
			<el-table-column prop="orderNo" label="订单号"></el-table-column>
			<el-table-column prop="butieType" label="补贴方式">
				<template slot-scope="scope">
					<p>{{ scope.row.butieType }}</p>
					<p>{{ scope.row.bizDesc }}</p>
				</template>
			</el-table-column>
			<el-table-column prop="butieMoney" label="补贴金额">
				<template slot="header" slot-scope="scope">
					<span>补贴金额</span>
					<el-tooltip popper-class="el-tooltip-theme-fresh" placement="top" effect="light">
						<div slot="content">补贴金额 = 订单补贴 + 订单手续费</div>
						<i class="el-icon-question" />
					</el-tooltip>
				</template>
				<template slot-scope="scope">
					<p :style="{ color: scope.row.orderType == 1 ? 'skyblue' : 'red' }">{{ scope.row.butieMoney }}</p>
				</template>
			</el-table-column>
			<el-table-column prop="orderType" label="类型">
				<template slot-scope="scope">
					{{ scope.row.orderType == 1 ? '交易订单' : '售后订单' }}
				</template>
			</el-table-column>
		</el-table>

		<pag-ination :page-total="pagTotal" @pageNum="getPageNum" @pageSize="getPageSize" />
	</div>
</template>

<script>
import pagInation from '../../components/pagInation/index.vue';
import { mapGetters } from 'vuex';
import { queryInviterSubsidyDetail, getSubsidyAccountBalance } from '@/api/business';
export default {
	components: {
		'pag-ination': pagInation
	},
	data() {
		return {
			/* 查询 */
			conditions: {
				pageNum: 1,
				pageSize: 10
			},
			pagTotal: null,
			/* 总额 */
			butieData: 0,
			totalMoneyType: {
				butie: 0,
				backButie: 0
			},

			tableData: []
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	mounted() {
		const { id } = this.userInfo.business;
		this.businessId = id;
		this.getSubsidyAccountBalanceFun();
		this.queryInviterSubsidyDetailFun();
	},
	methods: {
		// 获取分页
		getPageNum(val) {
			this.conditions.pageNum = val;
			this.queryInviterSubsidyDetailFun();
		},
		getPageSize(val) {
			this.conditions.pageSize = val;
			this.queryInviterSubsidyDetailFun();
		},
		//补贴状态
		getSubsidyAccountBalanceFun() {
			getSubsidyAccountBalance({ businessId: this.businessId }).then(res => {
				console.log('补贴状态', res);
				if (res.code == 0) {
					this.butieData = res.data / 100;
				}
			});
		},

		// 补贴详情
		queryInviterSubsidyDetailFun() {
			let params = {
				pageNum: this.conditions.pageNum,
				pageSize: this.conditions.pageSize
			};
			queryInviterSubsidyDetail(params).then(res => {
				console.log('补贴详情', res);
				if (res.code == 0) {
					this.pagTotal = res.data.total;
					this.totalMoneyType.butie = res.data.subsidyFee / 100;
					this.totalMoneyType.backButie = res.data.subsidyBackFee / 100;

					const data = res.data.list;
					const tableData = [];
					data.forEach(el => {
						const dataItem = {
							merchName: el.shopName,
							merchPhone: el.mobilePhone,
							address: el.address,
							orderNo: el.orderNo,
							butieType:
								el.favourableType == 1
									? '超级会员折扣'
									: el.favourableType == 2
									? '优惠券'
									: el.favourableType == 3
									? '超级会员积分'
									: el.favourableType == 4
									? '会员日折扣'
									: el.favourableType == 5
									? '会员卡折扣'
									: '会员生日折扣',
							bizDesc: el.bizDesc,
							butieMoney: el.subsidyAmount / 100,
							orderType: el.orderTradeType
						};
						tableData.push(dataItem);
					});
					this.tableData = tableData;
				}
			});
		},
		// 补贴充值
		topUpBtn() {
			window.open('https://dashboard.huifu.com/customers/login');
		}
	}
};
</script>

<style lang="scss" scoped>
.inviterButieClass {
	.tipBox {
		background-color: white;
		overflow: hidden;
		padding: 20px;
		font-size: 15px;
		line-height: 37px;
		p {
			float: left;
		}
		span {
			color: red;
		}
		.el-button {
			float: left;
			margin-left: 20px;
		}
	}
	.amount_box {
		background-color: white;
		overflow: hidden;
		padding: 20px;
		font-size: 20px;
		.lis {
			float: left;
			margin-right: 30px;
			text-align: center;
			font-weight: bold;
		}
	}
}
</style>
